<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import draggable from "vuedraggable";
import EditPen from "~icons/ep/edit-pen";
import Plus from "~icons/ep/plus";
import DeleteFilled from "~icons/ep/delete";
import ArrowDownBold from "~icons/ep/arrow-down-bold";
import MoreFilled from "~icons/ic/sharp-more-vert";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import type { wikiCatalogVO } from "@/api/blog/wiki";

const props = defineProps<{
  wikiId: number | null;
}>();

// 模拟目录数据
const catalogList = ref<wikiCatalogVO[]>([
  {
    id: 1,
    title: "目录 A",
    sort: 10,
    icon: "ep:folder",
    child: [
      { id: 11, title: "子目录 A1", sort: 10, icon: "ep:document" },
      { id: 12, title: "子目录 A2", sort: 20, icon: "ep:document" }
    ]
  },
  {
    id: 2,
    title: "目录 B",
    sort: 20,
    icon: "ep:folder",
    child: [{ id: 21, title: "子目录 B1", sort: 10, icon: "ep:document" }]
  },
  {
    id: 3,
    title: "目录 C",
    sort: 30,
    icon: "ep:folder",
    child: []
  }
]);

const onParentDragEnd = (evt: any) => {
  const { oldIndex, newIndex } = evt;
  if (oldIndex === newIndex) return;

  const source = catalogList.value[oldIndex];
  const target = catalogList.value[newIndex];

  // 交换 sort
  const tempSort = source.sort;
  source.sort = target.sort;
  target.sort = tempSort;

  // 交换数组位置
  const temp = catalogList.value[oldIndex];
  catalogList.value[oldIndex] = catalogList.value[newIndex];
  catalogList.value[newIndex] = temp;

  ElMessage.success("目录顺序已更新");
};

const onChildDragEnd = (evt: any, parent: wikiCatalogVO) => {
  const { oldIndex, newIndex } = evt;
  if (oldIndex === newIndex || !parent.child) return;

  const source = parent.child[oldIndex];
  const target = parent.child[newIndex];

  // 交换 sort
  const tempSort = source.sort;
  source.sort = target.sort;
  target.sort = tempSort;

  // 交换数组位置
  const temp = parent.child[oldIndex];
  parent.child[oldIndex] = parent.child[newIndex];
  parent.child[newIndex] = temp;

  ElMessage.success("子目录顺序已更新");
};

onMounted(() => {
  // 可在此调用后端获取目录
});
</script>

<template>
  <div>
    <el-button type="primary" :icon="Plus">添加目录</el-button>

    <!-- 一级目录 -->
    <draggable
      :list="catalogList"
      item-key="id"
      :animation="150"
      handle=".handle"
      @end="onParentDragEnd"
    >
      <template #item="{ element: catalog }">
        <div class="mb-2 border p-2 rounded bg-white">
          <!-- 一级目录行 -->
          <div class="flex items-center ps-3">
            <div class="pe-2">
              <el-icon><ArrowDownBold /></el-icon>
            </div>
            <div class="flex items-center gap-x-2 grow handle">
              <component :is="useRenderIcon(catalog.icon, { width: 16 })" />
              <span class="flex-grow font-bold">{{ catalog.title }}</span>
            </div>
            <el-icon><MoreFilled /></el-icon>
          </div>

          <!-- 二级目录 -->
          <draggable
            v-if="catalog.child?.length"
            :list="catalog.child"
            item-key="id"
            :animation="150"
            handle=".handle"
            @end="evt => onChildDragEnd(evt, catalog)"
          >
            <template #item="{ element }">
              <li class="flex items-center ps-8 py-1 rounded hover:bg-gray-50">
                <div class="flex items-center gap-x-2 grow handle">
                  <component :is="useRenderIcon(element.icon, { width: 15 })" />
                  <span class="flex-grow">{{ element.title }}</span>
                </div>
                <el-icon><EditPen /></el-icon>
                <el-tooltip content="移出目录">
                  <el-icon><DeleteFilled /></el-icon>
                </el-tooltip>
              </li>
            </template>
          </draggable>
        </div>
      </template>
    </draggable>
  </div>
</template>

<style scoped>
.handle {
  cursor: grab;
}
</style>
